<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    style="width: 736px; height: auto !important; background: #222222; padding: 0"
    :before-close="close"
    :modal="false"
  >
    <template #title>
      <div style="padding: 24px 32px; font-size: 16px; font-weight: bold; color: #fff">充值</div>
    </template>
    <div class="recharge-box">
      <div class="top">
        <div v-for="(item, index) in list" :key="index" class="item">
          <div class="item-top">
            <div class="label m-t-10">
              {{ item.value * 10 }}
              <span class="icon"></span>
            </div>
            <div class="value">
              {{ item.value }}
              <span style="font-size: 10px">元</span>
            </div>
          </div>
          <div class="item-bottom m-t-10">
            <div class="add" @click="item.num++">+</div>
            <div class="center">{{ item.num }}</div>
            <div
              class="subtract"
              @click="
                () => {
                  if (item.num !== 0) item.num--;
                }
              "
            >
              -
            </div>
          </div>
        </div>
      </div>
      <div class="balance">
        余额：{{ balance }}
        <span class="icon"></span>
      </div>
      <template v-if="isShowQrcode">
        <Vue3NextQrcode
          text="https://fanyi.youdao.com/#/TextTranslate"
          :logoScale="0.19"
          :logoMargin="2"
          :logoImage="icon"
          level="H"
          :margin="2"
          :size="104"
        />
        <div>请使用{{ payName }}扫描二维码进行支付</div>
      </template>

      <div v-else class="tips">
        <div class="price">￥{{ total }}</div>
        <div>请用以下付款方式扫描二维码进行支付</div>
      </div>
      <div class="pay-methods">
        <div v-for="(item, index) in payList" :key="index" class="item" @click="getCode(item)">
          <img style="width: 50px; height: 50px" :src="item.icon" />
          <div class="text">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import aliPayIcon from "@/assets/live/alipay.svg";
import weChatIcon from "@/assets/live/wechat.svg";
import { Vue3NextQrcode } from "vue3-next-qrcode";

const dialogVisible = ref(false);
const isShowQrcode = ref(false);

const list = ref([
  {
    value: 6,
    num: 0,
  },
  {
    value: 28,
    num: 0,
  },
  {
    value: 68,
    num: 0,
  },
  {
    value: 98,
    num: 0,
  },
  {
    value: 128,
    num: 0,
  },
  {
    value: 188,
    num: 0,
  },
  {
    value: 388,
    num: 0,
  },
  {
    value: 648,
    num: 0,
  },
]);

const payList = ref([
  { label: "支付宝", icon: aliPayIcon, type: "apli" },
  { label: "微信", icon: weChatIcon, type: "wechat" },
]);
const icon = ref("");
const payName = ref("");

const balance = ref(1002); // 余额
const total = computed(() => {
  let result = 0;
  list.value.map((item) => {
    result += item.value * item.num;
  });
  return result.toFixed(2);
});
const init = () => {
  balance.value = 0;
  list.value = [
    {
      value: 6,
      num: 0,
    },
    {
      value: 28,
      num: 0,
    },
    {
      value: 68,
      num: 0,
    },
    {
      value: 98,
      num: 0,
    },
    {
      value: 128,
      num: 0,
    },
    {
      value: 188,
      num: 0,
    },
    {
      value: 388,
      num: 0,
    },
    {
      value: 648,
      num: 0,
    },
  ];
};
const show = () => {
  dialogVisible.value = true;
};
const close = () => {
  dialogVisible.value = false;
  init();
};

const getCode = (obj) => {
  isShowQrcode.value = true;
  icon.value = obj.icon;
  payName.value = obj.label;
};

defineExpose({
  show,
  close,
});
</script>
<style lang="scss" scoped>
.recharge-box {
  width: 100%;
  border-top: 1px solid #e7e7e7;
  padding: 0 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    width: 668px;
    .item {
      min-width: 144px;
      text-align: center;

      &-top {
        width: 100%;
        min-height: 30px;
        border-radius: 4px;
        padding: 16px 0;
        background: #383838;
        .value {
          font-size: 18px;
        }
        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2px;
          font-size: 14px;
        }
      }
      &-bottom {
        display: flex;
        gap: 4px;

        .add,
        .subtract {
          width: 32px;
          height: 32px;
          line-height: 32px;
          background: #383838;
          border-radius: 2px;
          font-size: 18px;
          cursor: default;
          -webkit-user-select: none; /* Safari */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE 10+ */
          user-select: none; /* 标准语法 */
        }
        .center {
          flex: 1;
          background: #383838;
          border-radius: 2px;
          font-size: 14px;
          line-height: 32px;
        }
      }
    }
  }
  .balance {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
  }
  .tips {
    text-align: center;
    .price {
      font-size: 24px;
      font-weight: bold;
      padding: 6px;
    }
  }
  .pay-methods {
    width: 60%;
    margin: 0 auto;
    padding: 80px 0 50px;
    display: flex;
    justify-content: space-around;
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;

      .text {
        padding: 3px;
      }
    }
  }

  .icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    background-color: orange;
  }
}
</style>
